<template>
  <div id="page">

      <div id="navAside">
          <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  :collapse="isCollapse"
                  @open="handleOpen"
                  @close="handleClose"
                  popper-effect="light"
                  background-color="#001529"
                  active-text="#fff"
                  text-color="#fff"

          >
              
              <!-- <div style="height: 100%; overflow: auto;box-sizing: border-box;"> -->
                <div id="logo" :style="{opacity: showLogo && !isCollapse ? 1 : 0}">
                  加油站安全管理系统<br>
                  <div class="role">
                      当前用户角色：{{ roleName[role - 1] }}
                  </div>
              </div>
                <router-link to="/main/bulletinBoards">
                  <el-menu-item index="1">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                          <path fill="currentColor"
                                d="M192 413.952V896h640V413.952L512 147.328zM139.52 374.4l352-293.312a32 32 0 0 1 40.96 0l352 293.312A32 32 0 0 1 896 398.976V928a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V398.976a32 32 0 0 1 11.52-24.576"></path>
                      </svg>
                      <template #title>公告板</template>
                  </el-menu-item>
                </router-link>


                <el-sub-menu index="2">
                    <template #title>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                            <path fill="currentColor"
                                  d="M448 68.48v64.832A384.128 384.128 0 0 0 512 896a384.128 384.128 0 0 0 378.688-320h64.768A448.128 448.128 0 0 1 64 512 448.128 448.128 0 0 1 448 68.48z"></path>
                            <path fill="currentColor"
                                  d="M576 97.28V448h350.72A384.064 384.064 0 0 0 576 97.28zM512 64V33.152A448 448 0 0 1 990.848 512H512z"></path>
                        </svg>
                        <span>违规行为管理</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/main/checkViolationsVisual">
                            <el-menu-item index="2-1">可视化图表</el-menu-item>
                        </router-link>
                        <router-link to="/main/checkViolationsList">
                            <el-menu-item index="2-2">可查询列表</el-menu-item>
                        </router-link>
                        <div v-if="role==1">
                            <router-link to="/main/allCheckAppeal">
                                <el-menu-item index="2-3">违规申诉审核</el-menu-item>
                            </router-link>
                        </div>

                        <div v-if="role==3">
                            <router-link to="/main/stationCheckAppeal">
                                <el-menu-item index="2-3">违规申诉审核</el-menu-item>
                            </router-link>
                        </div>
                    </el-menu-item-group>
                </el-sub-menu>


                <el-sub-menu index="3">
                    <template #title>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                            <path fill="currentColor"
                                  d="M280.768 753.728 691.456 167.04a32 32 0 1 1 52.416 36.672L314.24 817.472a32 32 0 0 1-45.44 7.296l-230.4-172.8a32 32 0 0 1 38.4-51.2l203.968 152.96zM736 448a32 32 0 1 1 0-64h192a32 32 0 1 1 0 64zM608 640a32 32 0 0 1 0-64h319.936a32 32 0 1 1 0 64zM480 832a32 32 0 1 1 0-64h447.936a32 32 0 1 1 0 64z"></path>
                        </svg>
                        <span>安全巡检管理</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/main/visualSL">
                            <el-menu-item index="4-1">可视化图表</el-menu-item>
                        </router-link>
                        <router-link to="/main/listSL">
                            <el-menu-item index="4-2">列表查看</el-menu-item>
                        </router-link>
                        <router-link v-if="role!=1" to="/main/writeSL">
                            <el-menu-item index="4-3">安全巡检填报</el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="4">
                    <template #title>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                            <path fill="currentColor"
                                  d="m174.72 855.68 135.296-45.12 23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160 128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512 64 299.904 256 96 512 96s448 203.904 448 416-192 416-448 416a461.056 461.056 0 0 1-206.912-48.384l-175.616 58.56z"></path>
                            <path fill="currentColor"
                                  d="M512 563.2a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4m192 0a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4m-384 0a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4"></path>
                        </svg>
                        <span>安全知识智能问答</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/main/qa">
                            <el-menu-item index="5-1">智能问答
                            </el-menu-item>
                        </router-link>
                        <router-link v-if="role==1" to="/main/qaSetting">
                            <el-menu-item index="5-2">知识库管理</el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-sub-menu>
                <!-- </el-menu-item-group>
              </el-sub-menu> -->


                <!-- <div v-if="role!=1">
                <router-link to="/main/writeSL">
                <el-menu-item index="6">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M192 128v768h640V128zm-32-64h704a32 32 0 0 1 32 32v832a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h192v64H320zm0 384h384v64H320z"></path></svg><template #title>安全巡检填报</template>
                </el-menu-item>
              </router-link>
              </div> -->

                <div v-if="role!=3">
                    <router-link to="/main/gasStation">
                        <el-menu-item index="6">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                                <path fill="currentColor"
                                      d="M224 128v704h576V128zm-32-64h640a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32"></path>
                                <path fill="currentColor" d="M64 832h896v64H64zm256-640h128v96H320z"></path>
                                <path fill="currentColor"
                                      d="M384 832h256v-64a128 128 0 1 0-256 0zm128-256a192 192 0 0 1 192 192v128H320V768a192 192 0 0 1 192-192M320 384h128v96H320zm256-192h128v96H576zm0 192h128v96H576z"></path>
                            </svg>
                            <template #title>加油站管理</template>
                        </el-menu-item>
                    </router-link>
                </div>
                <div id="exitLogin" style="background-color: #001529; overflow: hidden;">
                  <el-menu-item  @click="open">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                            <path fill="currentColor"
                                  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"></path>
                        </svg>
                        <template #title>
                            <el-button type="text">退出登录</el-button>
                        </template>
                    </el-menu-item>
                </div>
              <!-- </div> -->
              


          </el-menu>

      </div>


      <div id="container">
          <div id="nav">
              <div id="radioBox">
                  <el-radio-group v-model="isCollapse" @click="changeMenu">
                      <div v-show="isCollapse">
                          <el-radio-button :label="false">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                                  <path fill="currentColor"
                                        d="M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688m-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"></path>
                              </svg>
                          </el-radio-button>
                      </div>
                      <div v-show="!isCollapse">
                          <el-radio-button :label="true">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                                  <path fill="currentColor"
                                        d="M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"></path>
                              </svg>
                          </el-radio-button>
                      </div>
                  </el-radio-group>
              </div>
              <div class="userInfo">
                  <img id="navBarAvatar" src="../assets/image/defaultAvatar.jpg" alt="">
                  <span v>{{ nickName }}</span>
              </div>
          </div>
          <div id="main">
              <div id="content">
                  <router-view></router-view>
              </div>
          </div>
      </div>

  </div>

</template>

<script setup>
import {ref} from 'vue';

const showLogo = ref(true)
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
}
const handleClose = (key, keyPath) => {
}
const belong = localStorage.getItem("belong")
const role = localStorage.getItem("role")
const nickName = localStorage.getItem("nickName")
const changeMenu = () => {
    showLogo.value = !showLogo.value

}
const roleName = ['总公司管理员', '分公司管理员', '加油站人员']
</script>

<script>
export default {

    methods: {
        open() {
            this.$confirm('是否确定退出登录?', '提示', {
                confirmButtonText: '退出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 成功退出时清除缓存信息
                localStorage.removeItem("my_token")
                localStorage.removeItem("role")
                localStorage.removeItem("belong")
                sessionStorage.clear()
                sessionStorage.removeItem("isAppeal")
                this.$router.push('/')
                //此组件自带的提示样式
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });

            }).catch(() => {
            });
        },
    }
}
</script>
<style lang="scss">

#nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
  align-items: center;
  padding: 0 20px;
  z-index: 10;
  position: relative;
  box-sizing: border-box;

  .userInfo {
    display: flex;
    align-items: center;
    height: 100%;
    color: #a9a9a9;

    #navBarAvatar {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      border: #a9a9a9 solid 1px;
      margin-right: 10px;
    }
  }
}

#container {
  position: relative;
  overflow: hidden;
  background-color: #f1f3f4;
}

.el-radio-button {
  /* --el-radio-button-checked-bg-color:#6b9987!important; */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu {
  position: relative;
  height: 100%;
  text-decoration: none;
}

#exitLogin .el-button > span {
  color: #fff;
}

#navAside > ul > li > div {
  font-weight: bold;
  /* font-size: 14px; */

}

.el-menu-item {
  font-weight: bold;
  // font-size: 20px;
}

.el-menu .is-active {
  font-weight: bold;
}

a {
  text-decoration: none !important;
}

#page {
  width: 100vw;
  display: flex;
  height: 100vh;
  --active-menu-item: #0375fe;
}

#navAside {
  overflow: auto;
  height: 100%;
  // width: 250px;
  position: relative;
  background-color: #001529;

  #logo {
    text-align: center;
    color: #edf2fa !important;
    font-size: 22px;
    letter-spacing: 2px;
    height: 80px;
    padding-top: 20px;
    font-weight: 600;
    color: var(--active-menu-item);
    margin-bottom: 40px;
    position: sticky;
    z-index: 1;
    background-color: #001529;
    top: 0px;
    .role {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0;
      color: #fff;
    }
  }
}

#radioBox {
  // position: absolute;
  // top: 0;
  // right: 0;
  // z-index: 100;
  // font-weight: bold;
  border: 0;
  display: flex;
  align-items: center;
  transform: translate(-50%, 0);
  width: var(--el-menu-icon-width);
  height: var(--el-menu-icon-width);

  .el-radio-button__inner {
    border: none;
  }
}

#container {
  display: flex;
  flex: 1;
  flex-direction: column;

  #main {
    flex: 1;
    width: 100%;
    overflow: auto;

    #content {
      min-width: 800px;
      min-height: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px 0;
    }
  }
}

// #exitLogin {
//   color: #fff !important;
//   width: 100%;
//   position: sticky;
//   bottom: 0px;
// }

.el-menu-vertical-demo svg, .el-radio-button__inner svg {
  margin-right: 5px;
  width: var(--el-menu-icon-width);
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

.el-sub-menu {
  height: fit-content;
}

.el-menu--inline {
  height: fit-content;
  padding-top: 0 !important;
}

.el-menu-item:hover {
  background-color: #000000 !important;
  color: var(--active-menu-item) !important;
  // background-color: var(--active-menu-item) !important;
}

#message {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5vh;
}

.el-menu-item-group__title {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#message span {
  font-size: 20px;
}

</style>
